<template>
  <div class="flex flex-col min-h-screen font-mi">
    <div class="star hidden md:inline">
      <StarAnimation />
    </div>
    <Header></Header>

    <div id="gallery" class="relative w-full animate__animated animate__fadeInUp">
      <!-- Carousel wrapper -->
      <div class="relative h-90 overflow-hidden rounded-lg md:h-120 hidden md:block">
        <!-- Item 1 -->
        <div class="duration-800 ease-in-out" data-carousel-item>
          <img :src="banner" class="absolute block max-w-full h-auto -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
            alt="">

          <div
            class="absolute inset-0 flex flex-col items-center justify-center text-white text-center bg-black bg-opacity-10">
            <h1 class="text-4xl font-semibold font-mi subpixel-antialiased" :style="{ letterSpacing: '0.2em' }">{{
              blogName }}</h1>
            <p class="text-lg mt-7 font-medium font-mi subpixel-antialiased">{{ bannerSlogan }}</p>
          </div>

          <!-- banner图底波纹动效 -->
          <div class="wave absolute inset-0 flex items-end justify-center">
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
              <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
              </defs>
              <!-- 渐变的白色 为了适配黑夜切换这里后面要改 -->
              <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" :fill="waveColors[0]" />
                <use xlink:href="#gentle-wave" x="48" y="3" :fill="waveColors[1]" />
                <use xlink:href="#gentle-wave" x="48" y="5" :fill="waveColors[2]" />
                <use xlink:href="#gentle-wave" x="48" y="7" :fill="waveColors[3]" />
              </g>
            </svg>
          </div>



        </div>
      </div>

    </div>




    <div class="flex-grow container mx-auto max-w-screen-xl mt-5">
      <div class="grid grid-cols-4">
        <!-- 左边栏 -->
        <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4 animate__animated animate__fadeInUp">
          <!-- 文章列表 -->
          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
            <div v-for="(article, index) in articles" :key="index"
              class="bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 shadow-md transition-transform duration-500 ease-in-out hover:scale-105">
              <div
                class="relative bg-white hover:scale-[1.03] h-full border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">

                <a @click="goArticleDetail(article.id)" class="cursor-pointer h-40 overflow-hidden">
                  <!-- 调整图片宽高比为1.6 -->
                  <img
                    class="rounded-t-lg h-40 w-full object-cover"
                    :src="article.titleImage" style="aspect-ratio: 1.6;" />
                </a>
                <div class="p-3 h-48 overflow-hidden flex flex-col justify-between">
                  <!-- 调小标签与图片的距离 -->
                  <div class="mt-1px">
                    <div class="flex overflow-hidden">
                      <div v-for="(item, index) in article.tags.slice(0, 3)" :key="index"
                        @click="goTagArticleListPage(item.id, item.name)"
                        class="mb-2 cursor-pointer font-mi inline-block bg-purple-100 text-purple-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full border border-purple-400 hover:bg-purple-200 hover:text-purple-900 dark:bg-gray-700 dark:text-purple-400 border border-purple-400">
                        {{ item.name }}
                      </div>
                      <div v-if="article.tags.length > 3"
                        class="mb-2 cursor-pointer font-mi inline-block bg-purple-100 text-purple-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full border border-purple-400 hover:bg-purple-200 hover:text-purple-900 dark:bg-gray-700 dark:text-purple-400 border border-purple-400">
                        <span title="更多标签...">...</span>
                      </div>
                    </div>
                  </div>

                  <a @click="goArticleDetail(article.id)" class="cursor-pointer">
                    <!-- 调小标题的字号 -->
                    <h2
                      class="mb-2 font-mi custom-title text-xl tracking-tight text-gray-900 dark:text-white fixed-height-title">
                      {{
                      article.title }}</h2>
                  </a>
                  <!-- description描述最多显示2行，调小字号 -->
                  <div class="flex-grow">
                    <p
                      class="mb-3 font-mi font-normal text-sm text-gray-500 dark:text-gray-400 line-clamp-2 cursor-pointer">
                      {{
                      article.description
                      }}</p>
                  </div>
                  <!-- meta 信息 -->
                  <p class="text-gray-400 text-sm flex items-center article-mata font-mi cursor-pointer">
                    <svg class="inline w-3 h-3 mr-2 text-gray-400 " aria-hidden="true"
                      xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                    </svg>
                    {{ article.createTime }}

                    <svg t="1731379375046" class="icon inline w-4 h-4 ml-2 mr-1  text-gray-400 dark:text-white"
                      viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30598" width="128"
                      height="128">
                      <path
                        d="M195.047619 390.095238l288.426667 137.264762a108.495238 108.495238 0 0 0 45.104762 9.99619 104.350476 104.350476 0 0 0 45.104762-10.24L862.354286 390.095238a55.100952 55.100952 0 0 0 0-102.643809L574.171429 151.161905a106.057143 106.057143 0 0 0-45.104762-9.996191h-2.925715a106.057143 106.057143 0 0 0-42.179047 9.996191L195.047619 288.182857A55.100952 55.100952 0 0 0 195.047619 390.095238z m334.019048-190.659048a48.761905 48.761905 0 0 1 20.23619 4.388572l285.988572 136.045714-285.988572 135.801905a48.761905 48.761905 0 0 1-40.472381 0L222.841905 339.626667l285.744762-136.045715a55.832381 55.832381 0 0 1 20.48-4.144762z"
                        fill="#3898FC" p-id="30599"></path>
                      <path
                        d="M177.249524 539.062857l294.034286 146.285714a128.24381 128.24381 0 0 0 57.051428 13.409524h1.462857a129.706667 129.706667 0 0 0 57.051429-13.409524l294.034286-146.285714a28.769524 28.769524 0 0 0 12.921904-38.765714 29.257143 29.257143 0 0 0-38.765714-12.678095L560.761905 633.904762a71.68 71.68 0 0 1-63.878095 0l-292.571429-146.285714a29.013333 29.013333 0 1 0-26.087619 51.931428z"
                        fill="#3898FC" p-id="30600"></path>
                      <path
                        d="M855.04 665.6L560.761905 811.641905a73.142857 73.142857 0 0 1-63.878095 0l-292.571429-146.285715a29.500952 29.500952 0 0 0-29.744762 1.219048 29.013333 29.013333 0 0 0-13.165714 26.575238 28.525714 28.525714 0 0 0 16.822857 24.380953l294.034286 146.285714a131.169524 131.169524 0 0 0 57.539047 13.409524 131.413333 131.413333 0 0 0 57.782857-13.409524l294.034286-146.285714a29.013333 29.013333 0 1 0-25.843809-52.175239z"
                        fill="#FFC043" p-id="30601"></path>
                    </svg>
                    <a @click="goCatagoryArticleListPage(article.category.id, article.category.name)"
                      class="text-gray-400 hover:underline font-mi cursor-pointer">{{ article.category.name }}</a>

                    <svg t="1731389375267" class="icon inline w-5 h-5 ml-2 mr-0  text-gray-400 dark:text-white"
                      viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="50521" width="48"
                      height="48">
                      <path
                        d="M821.248 400.896c-66.56-100.352-180.224-166.912-309.248-166.912-129.024 0-243.2 66.56-309.248 166.912-16.896 25.6-30.208 52.736-40.448 81.92 10.24 28.672 23.552 56.32 40.448 81.92 66.56 100.352 180.224 166.912 309.248 166.912 129.024 0 243.2-66.56 309.248-166.912 16.896-25.6 30.208-52.736 40.448-81.92-9.728-28.672-23.552-56.32-40.448-81.92z m-309.248 286.72c-138.752 0-258.56-84.48-309.76-204.8 51.2-120.32 171.008-204.8 309.76-204.8s258.56 84.48 309.76 204.8c-51.2 120.32-171.008 204.8-309.76 204.8z"
                        p-id="50522" fill="#8a8a8a"></path>
                      <path
                        d="M512 346.112c-75.264 0-136.704 61.44-136.704 136.704S436.736 619.52 512 619.52s136.704-61.44 136.704-136.704-61.44-136.704-136.704-136.704z m0 229.376c-51.2 0-92.672-41.472-92.672-92.672S460.8 390.144 512 390.144s92.672 41.472 92.672 92.672-41.472 92.672-92.672 92.672z"
                        p-id="50523" fill="#8a8a8a"></path>
                    </svg>
                    {{ article.readNum }}
                  </p>
                </div>

                <!-- 是否置顶 -->
                <div v-if="article.isTop"
                  class="absolute inline-flex items-center justify-center w-12 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-gray-600">
                  置顶
                </div>
                
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <nav aria-label="Page navigation example" v-if="total > 0">
            <ul class="flex items-center justify-center mt-10 mb-10 -space-x-px h-10 text-base">
              <li>
                <a v-if="current > 1" @click="getArticles(current - 1)"
                  class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <span class="sr-only">Previous</span>
                  <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M5 1 1 5l4 4" />
                  </svg>
                </a>
                <a v-else @click="getArticles(current)"
                  class="cursor-not-allowed flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <span class="sr-only">Previous</span>
                  <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M5 1 1 5l4 4" />
                  </svg>
                </a>
              </li>
              <li v-for="page in pages" :key="page">
                <a @click="getArticles(page)"
                  class="flex items-center border-gray-300 justify-center px-4 h-10 leading-tight bg-white border dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                  :class="[page == current ? 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500  hover:bg-gray-100 hover:text-gray-700']">

                  {{ page }}
                </a>
              </li>
              <li>
                <a v-if="current < pages" @click="getArticles(current + 1)"
                  class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <span class="sr-only">Next</span>
                  <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m1 9 4-4-4-4" />
                  </svg>
                </a>
                <a v-else="current == pages" @click="getArticles(current)"
                  class="cursor-not-allowed flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <span class="sr-only">Next</span>
                  <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m1 9 4-4-4-4" />
                  </svg>
                </a>
              </li>
            </ul>
          </nav>


        </div>
        <!-- 右边栏 -->
        <div class="col-span-4 px-3 md:col-span-1 sm:col-span-4 animate__animated animate__fadeInUp">
          <div class="sticky top-21">
            <UserInfoCard></UserInfoCard>

            <!-- 文章分类 -->
            <div
              class="mb-3 shadow-md w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
              <!-- 分类标题 -->
              <div class="flex mb-3 justify-between">
                <h2 class="mb-1 pt-1.5 font-mi font-bold text-gray-900 uppercase dark:text-white">
                  <svg t="1698998570037" class="inline icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="21572" width="200" height="200">
                    <path
                      d="M938.666667 464.592593h-853.333334v-265.481482c0-62.577778 51.2-113.777778 113.777778-113.777778h128.948148c15.17037 0 28.444444 3.792593 41.718519 11.377778l98.607407 64.474074h356.503704c62.577778 0 113.777778 51.2 113.777778 113.777778v189.62963z"
                      fill="#3A69DD" p-id="21573"></path>
                    <path
                      d="M805.925926 398.222222h-587.851852v-125.155555c0-24.651852 20.859259-45.511111 45.511111-45.511111h496.82963c24.651852 0 45.511111 20.859259 45.511111 45.511111V398.222222z"
                      fill="#D9E3FF" p-id="21574"></path>
                    <path
                      d="M843.851852 417.185185h-663.703704v-98.607407c0-28.444444 22.755556-53.096296 53.096296-53.096297h559.407408c28.444444 0 53.096296 22.755556 53.096296 53.096297V417.185185z"
                      fill="#FFFFFF" p-id="21575"></path>
                    <path
                      d="M786.962963 938.666667h-549.925926c-83.437037 0-151.703704-68.266667-151.703704-151.703704V341.333333s316.681481 37.925926 430.45926 37.925926c189.62963 0 422.874074-37.925926 422.874074-37.925926v445.62963c0 83.437037-68.266667 151.703704-151.703704 151.703704z"
                      fill="#5F7CF9" p-id="21576"></path>
                    <path
                      d="M559.407407 512h-75.851851c-20.859259 0-37.925926-17.066667-37.925926-37.925926s17.066667-37.925926 37.925926-37.925926h75.851851c20.859259 0 37.925926 17.066667 37.925926 37.925926s-17.066667 37.925926-37.925926 37.925926z"
                      fill="#F9D523" p-id="21577"></path>
                  </svg>分类
                </h2>
                <!-- 查看更多 -->
                <a @click="router.push('/category/list')" class=" bg-gray-100 flex items-center px-3 py-1 text-xs font-medium text-center 
            text-gray-900  rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 
            dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:border-gray-700
             dark:focus:ring-gray-700">
                  <svg class="w-[7px] h-[7px] text-gray-400 dark:text-white" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1" />
                  </svg>
                </a>
              </div>

              <!-- 旧版分类列表 -->
              <!-- <div
                class="text-sm font-mi font-medium text-gray-900 bg-white rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories"
                  :key="index"
                  class="flex items-end block w-full px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                  <svg t="1731375404658" class="icon w-4 h-4 mr-2 mb-2px text-gray-800 inline dark:text-white"
                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17301" width="48"
                    height="48">
                    <path
                      d="M813.2096 901.5808H218.3168c-68.3008 0-123.6992-55.3984-123.6992-123.6992V648.704h842.24v129.1264c0 68.352-55.3472 123.7504-123.648 123.7504z"
                      fill="#ffa115" p-id="17302"></path>
                    <path
                      d="M857.1904 286.1568v-3.7888c0-75.8272-61.6448-137.472-137.472-137.472H472.832c-0.6144 0-1.1776 0.0512-1.792 0.1024-25.5488-27.136-61.3888-43.008-99.9424-43.008H201.3696c-75.8272 0-137.472 61.6448-137.472 137.472v555.3664c0 75.8272 61.6448 137.472 137.472 137.472h628.736c75.8272 0 137.472-61.6448 137.472-137.472V420.9152c0-66.5088-47.5136-122.1632-110.3872-134.7584z m-61.44-3.7888v1.0752h-200.7552c-28.5184 0-54.3744-15.7184-67.5328-41.0624l-18.688-36.0448h210.944c41.9328 0 76.032 34.0992 76.032 76.032z m110.3872 512.4096c0 41.9328-34.0992 76.032-76.032 76.032H201.3696c-41.9328 0-76.032-34.0992-76.032-76.032V239.4624c0-41.9328 34.0992-76.032 76.032-76.032h169.728c28.5184 0 54.3744 15.7184 67.5328 41.0624l34.304 66.2016a137.02144 137.02144 0 0 0 122.0608 74.24h235.1104c41.9328 0 76.032 34.0992 76.032 76.032v373.8112z"
                      fill="#474A54" p-id="17303"></path>
                  </svg>
                  {{ item.name }}
                </a>
              </div> -->
              <!-- 新版分类列表 -->
              <div
                class="text-sm flex flex-wrap gap-3 pt-2 font-medium text-gray-600 rounded-lg dark:border-gray-600 dark:text-white">
                <a @click="goCatagoryArticleListPage(category.id, category.name)"
                  v-for="(category, index) in categories" :key="index"
                  class="cursor-pointer inline-flex items-center px-4 py-2 text-sm font-medium text-center border rounded-lg 
            hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-300 
            dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:hover:text-white">
                  {{ category.name }}
                  <span
                    class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-sky-800 bg-sky-200 rounded-full">
                    {{ category.articlesTotal }}
                  </span>
                </a>
              </div>

            </div>

            <!-- 文章标签 -->
            <div
              class="mb-3 shadow-md w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
              <!-- 标签标题 -->
              <div class="flex mb-3 justify-between">
                <h2 class="mb-1 pt-1.2 font-mi font-bold text-gray-900 uppercase dark:text-white">
                  <svg t="1698980289658" class="inline icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="13858" width="200" height="200">
                    <path
                      d="M646.4512 627.5584m-298.1888 0a298.1888 298.1888 0 1 0 596.3776 0 298.1888 298.1888 0 1 0-596.3776 0Z"
                      fill="#C7ACEF" p-id="13859"></path>
                    <path
                      d="M467.6096 962.5088c-34.4064 0-68.7616-13.1072-94.976-39.2704l-276.48-276.48c-52.3776-52.3776-52.3776-137.5744 0-189.9008L465.4592 87.552a105.216 105.216 0 0 1 76.8512-30.6176l308.6336 8.3456c55.3472 1.4848 100.096 46.0288 101.7856 101.376l9.5744 310.1696c0.8704 28.7744-10.2912 56.9344-30.6176 77.2608l-369.2032 369.2032c-26.112 26.112-60.4672 39.2192-94.8736 39.2192z m71.8848-844.1856c-11.4176 0-22.4768 4.5568-30.5664 12.6464L139.6224 500.2752c-28.416 28.416-28.416 74.6496 0 103.0144l276.48 276.48c28.416 28.416 74.6496 28.416 103.0144 0l369.2032-369.2032a43.4176 43.4176 0 0 0 12.6464-31.8976l-9.5744-310.1696c-0.7168-22.8864-19.2-41.2672-42.0352-41.8816l-308.6336-8.3456c-0.4608 0.0512-0.8192 0.0512-1.2288 0.0512z"
                      fill="#4F4F4F" p-id="13860"></path>
                    <path
                      d="M676.4032 445.5424c-62.208 0-112.8448-50.6368-112.8448-112.8448s50.6368-112.8448 112.8448-112.8448c62.208 0 112.8448 50.6368 112.8448 112.8448s-50.6368 112.8448-112.8448 112.8448z m0-164.1984c-28.3648 0-51.4048 23.04-51.4048 51.4048s23.04 51.4048 51.4048 51.4048c28.3648 0 51.4048-23.04 51.4048-51.4048s-23.0912-51.4048-51.4048-51.4048z"
                      fill="#4F4F4F" p-id="13861"></path>
                  </svg>标签
                </h2>
                <!-- 查看更多 -->
                <a @click="router.push('/tag')" class=" bg-gray-100 flex items-center px-3 py-1 text-xs font-medium text-center 
            text-gray-900  rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 
            dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700 dark:hover:bg-gray-700 dark:hover:border-gray-700
             dark:focus:ring-gray-700">
                  <svg class="w-[7px] h-[7px] text-gray-400 dark:text-white" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1" />
                  </svg>
                </a>
              </div>

              <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index"
                style="font-size: 0.8rem"
                class="inline-block cursor-pointer font-mi bg-purple-100 text-purple-800 text-xs md:text-xs font-medium mr-1 mb-1 px-2.5 py-0.5 rounded hover:bg-purple-200 hover:text-purple-900 dark:hover:bg-gray-500 dark:hover:text-white  dark:text-white dark:bg-gray-700">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>

</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import UserInfoCard from '@/components/UserInfoCard.vue'
import { useRouter } from 'vue-router'
import { reactive, ref, onMounted, computed } from 'vue'
import { getIndexArticles } from '@/api/frontend/index'
import { getCategories } from '@/api/frontend/category'
import { getTags } from '@/api/frontend/tag'
import { useStore } from 'vuex';
import StarAnimation from '@/layouts/components/StarAnimation.vue';
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
// 亮色和暗色模式下的波纹颜色
const lightWaveColors = ['rgba(255,255,255,0.7)', 'rgba(255,255,255,0.5)', 'rgba(255,255,255,0.3)', '#fff'];
const darkWaveColors = ['rgba(30,30,30,0.7)', 'rgba(30,30,30,0.5)', 'rgba(30,30,30,0.3)', 'rgba(30,30,30,0.2)'];

// 计算属性，根据 isDark 的值返回相应的波纹颜色数组
const waveColors = computed(() => {
  return isDark.value ? darkWaveColors : lightWaveColors;
});
const store = useStore();

const blogName = computed(() => {
  return store.state.setting.blogName || '起风了';
});

const banner = computed(() => {
  return store.state.setting.banner || 'https://pic.imgdb.cn/item/6709d55ed29ded1a8c4b72ee.webp';
});

const bannerSlogan = computed(() => {
  return store.state.setting.bannerSlogan || '🍂总有人间一两风，填我十万八千梦🍂';
});

// onMounted(() => {
//   // 樱花特效脚本
//   var system = {}
//   var p = navigator.platform
//   system.win = p.indexOf('Win') == 0
//   system.mac = p.indexOf('Mac') == 0
//   system.x11 = (p == 'X11') || (p.indexOf('Linux') == 0)

//   if (system.win || system.mac || system.x11) {
//     // 如果是电脑
//     const script = document.createElement('script')
//     script.src = new URL('../../sakura.js', import.meta.url).href
//     document.head.appendChild(script)
//   } else {
//     // 如果是手机
//   }
// })

const router = useRouter()

const goArticleDetail = (articleId) => {
  console.log('跳转详情页' + articleId)
  router.push({ path: '/article/detail', query: { articleId: articleId } })
}

const articles = ref([])
// 当前页码
const current = ref(1)
const total = ref(0)
const size = ref(9)
const pages = ref(0)

// 获取分页数据
function getArticles(currentNo) {
  console.log('获取分页数据')
  getIndexArticles({ current: currentNo, size: size.value })
    .then((res) => {
      console.log(res)
      if (res.success == true) {
        articles.value = res.data
        current.value = res.current
        total.value = res.total
        size.value = res.size
        pages.value = res.pages
      }
    })
}
getArticles(current.value)

// 获取分类
const categories = ref([])
getCategories().then((e) => {
  console.log('获取分类数据')
  console.log(e)
  categories.value = e.data
})


// 获取标签
const tags = ref([])
getTags().then((e) => {
  console.log('获取标签数据')
  console.log(e)
  tags.value = e.data
})


const goCatagoryArticleListPage = (id, name) => {
  router.push({ path: '/category/article/list', query: { id: id, name: name } })
}

const goTagArticleListPage = (id, name) => {
  console.log('跳转 id' + id)
  router.push({ path: '/tag/article/list', query: { id: id, name: name } })
}

</script>

<style>
.star {
  z-index: 1;
  opacity: 0.7;
  position: fixed;
  pointer-events: none;
  /* 使 StarAnimation 不会拦截点击事件 */
}

.fixed-height-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 最多显示两行*/
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 超出部分以省略号显示 */
  height: calc(1.5em * 2);
  /* 计算2行的总高度，假设line-height为1.5 */
  line-height: 1.5em;
  /* 行高设置 */
}


.container {
  max-width: 1230px;
}

.article-img {
  height: 100%;
}

.two-line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  outline: 0;
  color: var(--el-menu-text-color);
  ;
  background-color: #fff;
  border-bottom: 2px solid #409eff;
  ;
}

.category-item:hover {
  text-decoration: underline;
  cursor: pointer;
}

.tag-item:hover {
  cursor: pointer;
}

.el-tag:hover {
  background-color: var(--el-color-info-light-8);
}

.cursor-pointer {
  cursor: pointer;
}


.waves {
  position: relative;
  width: 100%;
  height: 4rem;
  margin-bottom: -7px;
  /*Fix for safari gap*/

}

.content {
  position: relative;
  height: 20vh;
  text-align: center;
  background-color: white;
}

.content a {
  margin: 0 5px;
  font-size: 12px;
  color: #333;
}

.content a:hover {
  color: #000;
}

/* Animation */

.parallax>use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px;
  }

  .content {
    height: 30vh;
  }

  h1 {
    font-size: 24px;
  }
}
</style>